<template>
  <div id="app">
    <Layout style="height:100%">
      <Header>
        <h3 @click="clear">音乐播放器</h3>
        <div style="width: 70%;margin-left: 30px;">
          <Input search @on-search="search" v-model="musicName" enter-button placeholder="Enter something..."/>
        </div>
      </Header>
      <Layout style="height: calc(100vh - 64px - 76px);">
        <Sider>
          <MenuList style="width:100%"></MenuList>
        </Sider>
        <Content>
          <router-view></router-view>
        </Content>
      </Layout>
      <Footer>
        <aplayer autoplay :music="music" :list="list"/>
      </Footer>
    </Layout>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer'
import MenuList from './components/menu'

export default {
  name: 'my-project',
  data () {
    return {
      musicName: ''
    }
  },
  mounted () {
    console.log(this.$store.state.music.list)
  },
  computed: {
    list () {
      return this.$store.state.music.list
    },
    music () {
      return this.$store.state.music.music
    }
  },
  methods: {
    search () {
      let musicName = this.musicName
      this.$router.push({path: `/seach/${musicName}`})
    },
    clear () {
      this.$store.commit('music/clear')
    }
  },
  components: {
    MenuList,
    Aplayer
  }
}
</script>

<style>
/* CSS */
html, body, #app {
  height: 100vh;
  overflow: hidden;
}

.ivu-layout-sider {
  background: #ffffff;
}

.ivu-layout-footer {
  padding: 0px;
}

.aplayer {
  overflow: initial !important;
}

.aplayer-list {
  position: absolute;
  right: 0;
  bottom: 66px;
  background: #fff;

}

.ivu-layout-header {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
